<template lang="pug">
el-dialog(:title='titleText' :visible.sync='showDialog' width='30%')
  span {{ content }}
  span.dialog-footer(slot='footer')
    el-button(@click="childOperation('cancel')") {{ cancelText }}
    el-button(type='primary' @click="childOperation('confirm')")
      | {{ confirmText }}
</template>

<script>
export default {
  name: 'ConfirmDialog',
  props: {
    isShowDialog: {
      type: Boolean,
      default: true
    },
    content: {
      type: String,
      default: '这是一段信息'
    },
    titleText: {
      type: String,
      default: '提示'
    },
    cancelText: {
      type: String,
      default: '取 消'
    },
    confirmText: {
      type: String,
      default: '确 认'
    }
  },
  data() {
    return {
      showDialog: this.isShowDialog
    }
  },
  watch: {
    isShowDialog(val) {
      this.showDialog = val // ②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
    },
    showDialog(val) {
      this.$emit('on-result-change', val) // ③组件内对myResult变更后向外部发送事件通知
    }
  },
  created() {
    console.log(this.isShowDialog)
  },
  methods: {
    childOperation(value) {
      this.$emit('child-operation', value)
    }
  }
}
</script>

<style scoped>
</style>
